import { ParentTreePathItemType } from '@/types/workflow/node';
import { LineOutlined } from '@ant-design/icons';
import React, { useMemo } from 'react';
import { t } from '@/locales/i18n';

const FolderPath = (props: {
  paths: ParentTreePathItemType[];
  rootName?: string;
  FirstPathDom?: React.ReactNode;
  onClick: (parentId: string) => void;
  fontSize?: string;
  className?: string;
}) => {
  const {
    paths,
    rootName = t('common.folder.Root Path'),
    FirstPathDom,
    onClick,
    fontSize,
    className,
  } = props;

  const concatPaths = useMemo(
    () => [
      {
        parentId: '',
        parentName: rootName,
      },
      ...paths,
    ],
    [rootName, paths],
  );

  return paths.length === 0 && !!FirstPathDom ? (
    <>{FirstPathDom}</>
  ) : (
    <div className="ml-2 flex flex-1">
      {concatPaths.map((item, i) => (
        <div className="flex items-center" key={item.parentId || i}>
          <div
            className={`flex items-center rounded-md px-2 py-1 text-sm ${
              i === concatPaths.length - 1
                ? 'cursor-default font-bold text-gray-700'
                : `cursor-pointer font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-700 ${className}`
            }`}
            {...(i === concatPaths.length - 1
              ? {}
              : {
                  onClick: () => {
                    onClick(item.parentId);
                  },
                })}
          >
            {item.parentName}
          </div>
          {i !== concatPaths.length - 1 &&
            // <MyIcon name={'common/line'} color={'myGray.500'} mx={1} width={'5px'} />
            '/'}
        </div>
      ))}
    </div>
  );
};

export default React.memo(FolderPath);
